<template>
    <div>
        <el-table
            :data="
                parkings.filter(
                    (data) =>
                        !search || 
                        data.lessorsId.account
                            .toLowerCase()
                            .includes(search.toLowerCase()) ||
                        data.number
                            .toLowerCase()
                            .includes(search.toLowerCase()) ||
                        data.address
                            .toLowerCase()
                            .includes(search.toLowerCase())
                )
            "
            style="width: 100%"
        >
            <el-table-column label="日期" width="180">
                <template slot-scope="scope">
                    <i class="el-icon-time"></i>
                    <span style="margin-left: 10px">{{ scope.row.time }}</span>
                </template>
            </el-table-column>
            <el-table-column label="地址" width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{
                        scope.row.address
                    }}</span>
                </template>
            </el-table-column>
            <el-table-column label="车牌号" width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{
                        scope.row.number
                    }}</span>
                </template>
            </el-table-column>
            <el-table-column label="姓名" width="180">
                <template slot-scope="scope">
                    <el-popover trigger="hover" placement="top">
                        <p>姓名: {{ scope.row.lessorsId.account }}</p>
                        <p>产权信息: {{scope.row.property}}年</p>
                        <p>出租周期:{{ scope.row.cycle }}</p>
                        <p>出租价格:{{ scope.row.price }}元</p>
                        <div slot="reference" class="name-wrapper">
                            <el-tag size="medium">{{
                                scope.row.lessorsId.account
                            }}</el-tag>
                        </div>
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column label="状态" width="180">
                <template slot-scope="scope">
                    <span v-if="scope.row.state==1" style="margin-left: 10px">未审核</span>
                    <span v-else-if="scope.row.state==2" style="margin-left: 10px">审核通过(未上架)
                    </span>
                    <span v-else-if="scope.row.state==3" style="margin-left: 10px">审核未通过</span>
                    <span v-else-if="scope.row.state==4" style="margin-left: 10px">已上架(未出租)</span>
                    <span v-else-if="scope.row.state==5" style="margin-left: 10px">已出租</span>
                </template>
            </el-table-column>
            
            <el-table-column align="right">
                <template slot="header" slot-scope="scope">
                    <el-input
                        v-model="search"
                        size="mini"
                        placeholder="输入关键字搜索"
                    />
                </template>
               <template slot-scope="scope">
                    <el-button size="mini"
                    type="primary"
                     @click="pass({_id:scope.row._id,state:2})"
                        >YES</el-button
                    >
                    <el-button
                        size="mini"
                        type="danger"
                        @click="noPass({_id:scope.row._id,state:3})"
                        >NO</el-button
                    >
                </template>
            </el-table-column>
        </el-table>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[7, 10, 15]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
        >
        </el-pagination>
    </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const {
    mapState: parkingsMapState,
    mapMutations: parkingsMapMutations,
    mapActions: parkingsMapActions,
} = createNamespacedHelpers("parkings");

export default {
    data() {
        return {
            search: "",
           state:""
        };
    },
    mounted() {
        this.getParkings();
    },
    watch: {
        currentPage() {
            this.getParkings();
        },
        pageSize() {
            this.getParkings();
        },
    },
    computed: {
        ...parkingsMapState(["parkings", "total", "currentPage", "pageSize"]),
        pageSize: {
            get() {
                return this.$store.state.parkings.pageSize;
            },
            set(val) {
                this.changePageSize(val);
            },
        },
    },
    methods: {
         handleSizeChange(val) {
            this.changePageSize(val);
        },
        handleCurrentChange(val) {
            this.changeCurrentPage(val);
        },
        ...parkingsMapMutations([
            "changePageSize",
            "changeCurrentPage",
            "changeData",
            "changeAudit",
             'changeLessorsId'
        ]),

        
        ...parkingsMapActions(["getParkings","deleteParkings","updataAuditParkings"]),
        //审核通过
         async pass({_id,state}) {
            const data = await this.updataAuditParkings({_id,state});
            this.getParkings();
        },    
        //审核不通过
          async noPass({_id,state}) {
            const data = await this.updataAuditParkings({_id,state});
            this.getParkings();
        },    
    },
    
};
</script>